<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>驾校约车系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>

        /* 导航栏样式开始 */
        header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
            background-color: white;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }

        .header-container {
            max-width: 900px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 20px;
        }

        .logo {
            display: flex;
            align-items: center;
        }

        .logo-icon {
            width: 40px;
            height: 40px;
            background-color: #409EFF;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 10px;
        }

        .logo-text {
            font-size: 24px;
            font-weight: bold;
            color: #2c3e50;
        }

        .nav-links {
            display: flex;
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .nav-links li {
            margin-left: 20px;
        }

        .nav-links a {
            text-decoration: none;
            color: #34495e;
            font-size: 16px;
            font-weight: 500;
            transition: color 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .nav-links a::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 0.5px;
            background: #409EFF;
            transition: all 0.3s ease;
        }

        .nav-links a:hover {
            color: #409EFF;
        }

        .nav-links a:hover::after {
            width: 100%;
        }

        /* 导航栏样式结束 */
    </style>
</head>
<!-- 导航栏 -->
<header>
    <div class="header-container" style="width: 1000px;">
        <div class="logo">
            <div class="logo-icon">
                <i class="fa fa-car text-white text-xl"></i>
            </div>
            <span class="logo-text">驾校学员交流区</span>
        </div>
        <nav>
            <ul class="nav-links">
                <a href="/zrz/daohanglanLayui" class="text-dark hover:text-primary nav-link-hover font-medium">首页</a>&nbsp;&nbsp;&nbsp;
                <a href="#courses" class="text-dark hover:text-primary nav-link-hover font-medium">课程</a>&nbsp;&nbsp;&nbsp;
                <a href="/ljk/coach/index" class="text-dark hover:text-primary nav-link-hover font-medium">教练团队</a>&nbsp;&nbsp;&nbsp;
                <a href="/hzj/jiaxiaoguanliList"
                   class="text-dark hover:text-primary nav-link-hover font-medium">基本信息</a>&nbsp;&nbsp;&nbsp;
                <a href="/kaiban/page" class="text-dark hover:text-primary nav-link-hover font-medium">开班信息</a>&nbsp;&nbsp;&nbsp;
                <a href="/zjy/liuyan" class="text-dark hover:text-primary nav-link-hover font-medium">用户留言</a>&nbsp;&nbsp;&nbsp;
                <a href="/zjy/zixun" class="text-dark hover:text-primary nav-link-hover font-medium">用户咨询</a>&nbsp;&nbsp;&nbsp;
                <a href="/zjh/confirmed/html" class="text-dark hover:text-primary nav-link-hover font-medium">预约确认</a>
            </ul>
        </nav>
        <a href="#" class="contact-button hidden md:block">联系客服</a>
    </div>
</header>


<body style="background-color: #e6f3ff; margin: 0; padding: 20px; font-family: Arial, sans-serif;">
<div style="max-width: 900px; margin: 0 auto; background-color: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
    <h2 style="color: #3399ff; text-align: center; margin-bottom: 30px;">驾校约车系统</h2>

    <!-- 约车表单 -->
    <div style="background-color: #f0f8ff; padding: 20px; margin-bottom: 20px; border-radius: 8px;">
        <h3 style="color: #3399ff; margin-top: 0;">预约练车</h3>
        <form id="bookingForm">
            <!-- 成员信息 -->
            <div style="margin-bottom: 15px;">
                <label style="display: block; margin-bottom: 5px; color: #333;">学员信息：</label>
                <input type="text" id="memberName" placeholder="姓名"
                       style="padding: 8px; width: 150px; margin-right: 10px; border: 1px solid #ccc; border-radius: 4px;"
                       required>
                <input type="text" id="memberPhone" placeholder="手机号"
                       style="padding: 8px; width: 150px; margin-right: 10px; border: 1px solid #ccc; border-radius: 4px;"
                       required>
                <select id="licenseType" style="padding: 8px; width: 120px; border: 1px solid #ccc; border-radius: 4px;"
                        required>
                    <option value="">选择驾照类型</option>
                    <option value="C1">C1（小型汽车）</option>
                    <option value="C2">C2（小型自动挡汽车）</option>
                    <option value="B2">B2（大型货车）</option>
                </select>
            </div>

            <!-- 预约时间 -->
            <div style="margin-bottom: 15px;">
                <label style="display: block; margin-bottom: 5px; color: #333;">预约时间：</label>
                <input type="date" id="date"
                       style="padding: 8px; width: 150px; margin-right: 10px; border: 1px solid #ccc; border-radius: 4px;"
                       required>
                <select id="timeSlot" style="padding: 8px; width: 150px; border: 1px solid #ccc; border-radius: 4px;"
                        required>
                    <option value="">选择时间段</option>
                    <option value="1">上午 8:00-10:00</option>
                    <option value="2">上午 10:00-12:00</option>
                    <option value="3">下午 14:00-16:00</option>
                    <option value="4">下午 16:00-18:00</option>
                </select>
            </div>

            <!-- 教练选择 -->
            <div style="margin-bottom: 15px;">
                <label style="display: block; margin-bottom: 5px; color: #333;">选择教练：</label>
                <select id="instructor" style="padding: 8px; width: 150px; border: 1px solid #ccc; border-radius: 4px;"
                        required>
                    <option value="">选择教练</option>
                    <option value="1">赵仁珍（教练）（A1/A2/A3）</option>
                    <option value="2">赵健洋（教练）（A1/A2/A3）</option>
                    <option value="3">李俊葵（教练）（B1/B2）</option>
                    <option value="4">柏恩崎（教练）（B1/B2）</option>
                    <option value="5">赵井豪（教练）（C1/C2）</option>
                    <option value="6">黄振杰（教练）（C1/C2）</option>
                    <option value="7">向万雨（教练）（C1/C2）</option>
                </select>
            </div>

            <button type="submit"
                    style="background-color: #3399ff; color: white; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer;">
                提交预约
            </button>
        </form>
    </div>

    <!-- 约车记录 -->
    <div style="background-color: #f0f8ff; padding: 20px; border-radius: 8px;">
        <h3 style="color: #3399ff; margin-top: 0;">约车记录</h3>
        <div style="overflow-x: auto;">
            <table style="width: 100%; border-collapse: collapse; background-color: white;">
                <thead>
                <tr style="background-color: #3399ff; color: white;">
                    <th style="padding: 12px; text-align: left;">学员姓名</th>
                    <th style="padding: 12px; text-align: left;">手机号</th>
                    <th style="padding: 12px; text-align: left;">驾照类型</th>
                    <th style="padding: 12px; text-align: left;">预约日期</th>
                    <th style="padding: 12px; text-align: left;">时间段</th>
                    <th style="padding: 12px; text-align: left;">教练</th>
                    <th style="padding: 12px; text-align: left;">状态</th>
                    <th style="padding: 12px; text-align: left;">操作</th>
                </tr>
                </thead>
                <tbody id="recordList">
                <!-- 示例记录 -->
                <tr style="border-bottom: 1px solid #e6f3ff;">
                    <td style="padding: 12px;">张三</td>
                    <td style="padding: 12px;">13800138000</td>
                    <td style="padding: 12px;">C1</td>
                    <td style="padding: 12px;">2024-01-20</td>
                    <td style="padding: 12px;">上午 8:00-10:00</td>
                    <td style="padding: 12px;">张教练</td>
                    <td style="padding: 12px;">
                        <a href="/zjh/queren"><span
                                style="background-color: #fff3cd; color: #856404; padding: 3px 8px; border-radius: 3px; font-size: 12px;">
                                    待确认
                                </span></a>
                    </td>
                    <td style="padding: 12px;">
                        <button onclick="cancelBooking(this)"
                                style="background-color: #dc3545; color: white; padding: 5px 10px; border: none; border-radius: 3px; cursor: pointer;">
                            取消
                        </button>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<script>

    window.onload = function () {


        fetchData();
    };


    // 设置日期选择器的最小值为今天
    var today = new Date().toISOString().split('T')[0];
    document.getElementById('date').min = today;

    // 处理表单提交
    document.getElementById('bookingForm').onsubmit = function (e) {
        e.preventDefault();

        var memberName = document.getElementById('memberName').value;
        var memberPhone = document.getElementById('memberPhone').value;
        var licenseType = document.getElementById('licenseType');
        var licenseTypeText = licenseType.options[licenseType.selectedIndex].text;
        var date = document.getElementById('date').value;
        var timeSlot = document.getElementById('timeSlot');
        var timeSlotText = timeSlot.options[timeSlot.selectedIndex].text;
        var instructor = document.getElementById('instructor');
        var instructorText = instructor.options[instructor.selectedIndex].text;

        // 验证手机号
        if (!/^1[3-9]\d{9}$/.test(memberPhone)) {
            alert('请输入正确的手机号码！');
            return;
        }

        let reserve = {
            studentName: memberName,
            phone: memberPhone,
            licenseType: licenseTypeText,
            reservationDate: date,
            timeSlot: timeSlotText,
            coachName: instructorText
        }


        fetch('/zjh/reserve', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(reserve)
        })
        .then(response => response.json())
        .then(data => {
            // 显示成功消息
            alert('预约成功！');
            fetchData(); // 重新获取数据
        })
        .catch(error => console.error('错误:', error));
        // 重置表单
        // this.reset();
    };

    function fetchData(){
        fetch('/zjh/getAll', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({})
        })
            .then(response => response.json())
            .then(data => {
                // 显示成功消息
                document.getElementById('recordList').innerHTML = ''; // 清空现有记录

                data.data.forEach(item => {
                    const memberName = item.studentName;
                    const memberPhone = item.phone;
                    const licenseTypeText = item.licenseType;
                    const date = item.reservationDate;
                    const timeSlotText = item.timeSlot;
                    const instructorText = item.coachName;
                    const id = item.id;
                    const status = item.status;
                    // 添加新预约到记录列表
                    addDataRow({status,id,memberName, memberPhone, licenseTypeText, date, timeSlotText, instructorText});
                });

            })
    }

    function addDataRow(rowData) {
        rowData.date = rowData.date.substr(0,10)

        // 添加新预约到记录列表
        const newRow = `
                <tr style="border-bottom: 1px solid #e6f3ff;">
                    <td style="padding: 12px;">${rowData.memberName}</td>
                    <td style="padding: 12px;">${rowData.memberPhone}</td>
                    <td style="padding: 12px;">${rowData.licenseTypeText}</td>
                    <td style="padding: 12px;">${rowData.date}</td>
                    <td style="padding: 12px;">${rowData.timeSlotText}</td>
                    <td style="padding: 12px;">${rowData.instructorText}</td>
                    <td style="padding: 12px;">
                        <span style="background-color: #fff3cd; color: #856404; padding: 3px 8px; border-radius: 3px; font-size: 12px;">
                            ${rowData.status ? rowData.status : '待确认'}
                        </span>
                    </td>
                    <td style="padding: 12px;">
                        <button onclick="cancelBooking(this,'${rowData.id}')" style="background-color: #dc3545; color: white; padding: 5px 10px; border: none; border-radius: 3px; cursor: pointer;">
                            取消
                        </button>
                    </td>
                </tr>
            `;

        document.getElementById('recordList').insertAdjacentHTML('afterbegin', newRow);
    }


    // 取消预约
    function cancelBooking(button, id) {
        if (confirm('确定要取消这个预约吗？')) {

            fetch('/zjh/cancel', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({id})
            })
                .then(response => response.json())
                .then(data => {
                    if (data.code===0) {
                        alert('预约取消成功！');
                        fetchData(); // 重新获取数据
                    } else {
                        alert('取消预约失败，请稍后再试。');
                    }

                })


        }
    }


    // 导航栏滚动效果
    window.addEventListener('scroll', function () {
        const header = document.querySelector('header');
        if (window.scrollY > 50) {
            header.classList.add('shadow-md');
            header.style.padding = '10px 0';
        } else {
            header.classList.remove('shadow-md');
            header.style.padding = '15px 0';
        }
    });
</script>
</body>
</html>
